<template>
    <el-dialog :title="dialogTitle" center :visible.sync="show" :width='showwidth' class="dialogBox" :before-close="handleClose">
        <slot name="cont"></slot>
        <span slot="footer" v-if='showFooter' class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="serve">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
  name: "mydialog",
  props:{
    dialogTitle:{
        type:String,
        default:''
    },
    show:{
        type:Boolean,
        default:false
    },
    showFooter:{
        type:Boolean,
        default:true
    },
    showwidth:{
      type:String,
      default:''
    }
  },
  watch:{
    show(val){
      console.log(val)
        this.showDialog = val;
    }
  },
  data() {
    return {
        showDialog:false,
    };
  },
  components: {},
  mounted() {},
  methods: {
    //取消
    handleClose(){
        this.$emit("handleClose",false)
    },
    //确定
    serve(){
        this.$emit("serve")
    },
  },
};
</script>

<style lang='scss' scoped>
.dialogBox {
 width: 100%;
}
</style>
<style scoped>
  /deep/.el-dialog__header{
    border-bottom: 1px solid #e6e6e6;
  }
  /deep/.el-dialog__footer{
    border-top: 1px solid #e6e6e6;
    padding-bottom: 10px;
  }
</style>